<template>
	<view>
		<view class="person-info-base-form">
			<view class="person-info-base-form-contain">
				<form @submit="formSubmit" @reset="formReset">
					<view class="person-info-form-item">
						<view class="person-info-form-item-title">
							<text class="person-info-form-item-title-left">*</text>
							<text class="person-info-form-item-title-text">姓名</text>
						</view>
						<input placeholder-style="font-size:28upx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(178,178,178,1);"
						 class="person-info-input" v-model="realName" name="nickname" placeholder="请填写报名人姓名" />
					</view>
					<view class="person-info-form-item">
						<view class="person-info-form-item-title">
							<text class="person-info-form-item-title-left">*</text>
							<text class="person-info-form-item-title-text">电话</text>
						</view>
						<input placeholder-style="font-size:28upx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(178,178,178,1);"
						 class="person-info-input" v-model="phoneNumber" name="phoneNumber" placeholder="请填写报名人联系方式" />
					</view>
					<view class="person-info-form-item">
						<view class="person-info-form-item-title">
							<text style="visibility: hidden;" class="person-info-form-item-title-left">*</text>
							<text class="person-info-form-item-title-text">单位</text>
						</view>
						<input placeholder-style="font-size:28upx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(178,178,178,1);"
						 class="person-info-input" v-model="workUnit" name="workUnit" placeholder="请填写报名人工作单位" />
					</view>
					<view class="person-info-form-item">
						<view class="person-info-form-item-title">
							<text style="visibility: hidden;" class="person-info-form-item-title-left">*</text>
							<text class="person-info-form-item-title-text">职位</text>
						</view>
						<input placeholder-style="font-size:28upx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(178,178,178,1);"
						 class="person-info-input" v-model="jobDuties" name="jobDuties" placeholder="请填写报名人职位" />
					</view>
					
					<view class="person-info-bottom" :style="{'height':bottomHeight}">
						<view class="person-info-bottom-opt">
							<button form-type="submit">确定</button>
						</view>
					</view>
				</form>
			</view>
			

		</view>
		<!-- <view v-if="index" @click="delSigner" class="person-info-bottom-del">
			删除报名信息
		</view> -->
		<uni-popup ref="showtip" type="center" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title">提示</text>
				<text  class="uni-tip-content">是否删除该报名信息。</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button pop-line" @click="confirm">是</text>
					<text class="uni-tip-button" @click="cancel">否</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	var graceChecker = require("../../common/graceChecker.js");
    import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				index:null,
				realName:'',
				phoneNumber:'',
				workUnit:'',
				jobDuties:'',
				bottomHeight: '130rpx',
			}
		},
		computed: {
			...mapState('userStore', ['hasLogin', 'userInfo']),
			...mapState('orderStore', ['signerArr'])
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo']),
			...mapMutations('orderStore', ['updateSignerArr','addSignerArr', 'removeSignerArr']),
			
			formSubmit: function(e) {
				if(!permissionJudge('web:signUp:save')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				//定义表单规则
				var rule = [
					{
						name: "phoneNumber",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "请输入正确的手机号"
					}
				];
				if(this.realName.length>20||this.realName.length<1){
					uni.showToast({
						title: "姓名应为1-20个字符",
						icon: "none"
					});
					return false
				}
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
			
			
				if (checkRes) {
					let signer = {
						realName:this.realName,
						phoneNumber:this.phoneNumber,
						workUnit:this.workUnit,
						jobDuties:this.jobDuties,
					}
					if (this.index) {
						this.updateSignerArr({index: this.index, data: signer});
					} else {
						this.addSignerArr(signer);
					}
				
					uni.navigateBack();
					// uni.showToast({
					// 	title: "验证通过!",
					// 	icon: "none"
					// });
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			delSigner(){
				this.$nextTick(() => {
					this.$refs['showtip'].open()
				})
				
			},
			confirm(){
				this.removeSignerArr(this.index);
				uni.navigateBack();
			},
			cancel() {
				this.$refs['showtip'].close()
			},
			formReset: function(e) {
			},
			
		},
		onLoad(option) {
			if(option.index){
				let index = option.index;
				this.index = index;
				// let pages = getCurrentPages();、
				// let prevPage = pages[pages.length - 2]; //上一个页面 
				// let singerArr = prevPage.data.signerArr;
				
				this.realName = this.signerArr[index-0].realName;
				this.jobDuties = this.signerArr[index-0].jobDuties;
				this.workUnit = this.signerArr[index-0].workUnit;
				this.phoneNumber = this.signerArr[index-0].phoneNumber;
				uni.setNavigationBarTitle({
				    title: '编辑报名'
				});
				
			}else{
				uni.setNavigationBarTitle({
				    title: '添加报名'
				});
			}
			
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res.model);
					if (res.model.indexOf('iPhone X') != -1 || res.model.indexOf('iPhone 11') != -1) { //XS,XR,XS MAX均可以适配,因为indexOf()会将包含'iPhone X'的字段都查出来
						that.bottomHeight = '205rpx'
					} else {
						that.bottomHeight = '130rpx'
					}
				}
			});
		}
	}
</script>
<style>
	page{
		background-color: rgba(245,246,249,1);
	}
</style>
<style scoped>
	.margin-top25 {
		margin-top: 25upx;
	}

	.personal-info-top {
		width: 100%;
		height: 273upx;
		background-image: url("https://www.innovationgloble.com/wxs/img/background/wx_background1.png");
		background-size: 100%;
		position: relative;
		padding: 66upx 47upx;
	}

	.personal-info-top-contain {
		display: flex;
		align-items: center;
		
	}

	.top-bar-info-img {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
		display: flex;
		font-size: 140upx;
		justify-content: center;
		align-items: center;
	}

	.personal-info-top-contain-info {
		margin-left: 34upx;
	}

	.personal-info-top-contain-title {
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
	}

	.personal-info-top-contain-account {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.personal-info-base-title {
		display: flex;
		align-items: center;
		padding: 23upx 30upx;
		border-bottom: 1upx solid #DDDDDD;
	}

	.person-left-ver {
		width: 5upx;
		height: 32.5upx;
		background-color: #2A7DFA;
	}

	.person-info-base-tip {
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 21upx;
	}

	.person-ms-in {
		color: #DE5A02;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
	}

	.person-ms-item-title {
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.person-info-base-form-contain {
		padding: 10upx 0 50upx 10upx;
		background-color: #FFFFFF;
	}

	.person-info-input {
		border-bottom: 1upx solid #E1E1E1;
		padding-bottom: 20upx;
		padding-left: 213upx;
	}

	.person-info-form-item {
		margin-top: 25upx;
		position: relative;
	}

	.person-info-form-item-contain {
		margin-bottom: 25upx;
	}

	.uni-list::after {
		height: 1upx;
	}

	.uni-list::before {
		height: 0;
	}

	.person-info-bottom {
		box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.05);
		width: 100%;
		margin-top: 51upx;
		position: absolute;
		background: #fff;
		bottom: 0;
		/* padding: 0 56upx; */
	}
	.person-info-bottom-opt>button{
		font-size:30upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(255,255,255,1);
		height: 88upx;
		line-height: 88upx;
		background: linear-gradient(90deg, #55a5fd 0%, #2a7dfa 100%);
		border-radius: 12upx;
	}

	.person-info-radio {
		/* width: 26upx;
		height: 26upx; */
	}

	.person-info-bottom-opt {
		padding: 20upx 55upx;
	}
	.person-info-bottom-del{
		height: 98upx;
		background-color: #FFFFFF;
		font-size:28upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(243,65,66,1);
		display: flex;
		align-items: center;
		padding-left: 71upx;
		margin-top: 16upx;
	}
	.uni-tip {
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			width: 300px;
			background-color: #FFFFFF;
			border-radius: 24upx;
		}
	
		.uni-tip-title {
			margin-top: 37upx;
			text-align: center;
			font-size:34upx;
			font-family:PingFangSC-Semibold,PingFang SC;
			font-weight:600;
			color:rgba(3,3,3,1);
		}
	
		.uni-tip-content {
			text-align: center;
			font-size:28upx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(111,111,111,1);
			margin: 33upx 0upx;
		}
	
		.uni-tip-group-button {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border-top: 2upx solid #cbcbcb;
			/* margin-top: 20px; */
			height: 86upx;
			font-size:34upx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
		}
	
		.uni-tip-button {
			flex: 1;
			text-align: center;
			font-size: 14px;
			color: #F7B500;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.pop-line{
			border-right: 2upx solid #cbcbcb;
			color:#6F6F6F
		}
		.person-info-form-item-title{
			position: absolute;
			top: 0;
			left: 31upx;
		}
		.person-info-form-item-title-left{
			font-size:28upx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color: #DE5A02;
		}
		.person-info-form-item-title-text{
			font-size:28upx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color: #333333;
		}
</style>
